<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>zrender - Arc</title>
    <link rel="stylesheet" href="../lib/main.css">
</head>
<body>
<div id="main"></div>
<script src="../lib/zrender.js"></script> 
<script>
var zr = zrender.init(document.getElementById('main'), {
    renderer: 'svg',
});
var circle = new zrender.Arc({
    shape: {
        cx: 300,
        cy: 300,
        r: 40,
        startAngle: 0,
        endAngle: Math.PI/2,
        clockwise: true,
    },
    style: {
        fill: 'red',
        stroke: '#F00',
    }
});
zr.add(circle);

var Isogon = new zrender.Isogon({
    shape: {
        x: 300,
        y: 300,
        r: 200,
        n: 13,
    },
    style: {
        fill: 'none',
        stroke: '#F00',
    }
});
zr.add(Isogon);

var Line = new zrender.Line({
    shape: {
        x1: 0,
        y1: 300,
        x2: 600,
        y2: 300,
        percent: 0.5,
    },
    style: {
        fill: 'none',
        stroke: '#F00',
    }
});
zr.add(Line);

</script>
</body>
</html>